<template>
<div>

     <div class="loginTop">

         <div >  </div>
         <div class="middle"> {{middleTop}} </div>
         <div  class="right"> 
             <!-- 这是子组件，留有一个插槽，里面的内容将由父组件去传递给子组件（自己） -->
            <slot name="right" />
        </div>

     </div>


</div>
</template>

<script>

export default {
    data() {
        return {

        };
    },
    methods: {

    },

    props:[ 'middleTop'  ]



    }
</script>


<style  scoped>

    .loginTop{
        height: 12vw;
        background-color: #fff;
        display: flex;
    }

    .loginTop div{
        flex:1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .middle{
        
        font-size: 4.8vw;
    }
    .right{
        font-size:16px ;
        padding-left:8vw;
    }


</style>